<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:x="http://java.sun.com/jstl/xml">

	<h:head>
		<title>Globallogic vacation planner 1.0</title>
		<style>
</style>
		<link rel="stylesheet" type="text/css" href="css/container.css" />
		<link rel="stylesheet" type="text/css" href="css/vacation.css" />
	</h:head>

	<h:body bgcolor="silver">
		<div class="container">
			<center>
				<h2>Vacations:</h2>

				<div class="poster">
					<a> <img src="images/defaultUser.png" width="160px"
						height="160px" />
					</a>
				</div>
				<div class="about">
					<font color="blue">
						<p>Name: #{userBean.userName}</p>
						<p>Surname: #{userBean.surname}</p>
						<p>Email: #{userBean.email}</p>
					</font>
				</div>

				<div class="links">
					<p align="left">
						<h:form>
							<a href="userPage.xhtml">Home___|___</a>
							<a href="vacation.xhtml">Vacations___|___</a>
							<a href="projects.xhtml">Projects___|___</a>
							<h:commandLink value="Log out" action="#{userBean.logout}" />
						</h:form>
					</p>
				</div>
			</center>
			<center>
				<div class="table">
					<c:if test="#{not empty vacationBean.pastDayEx}">
						<h3>
							<font color="red">#{vacationBean.pastDayEx}</font>
						</h3>
					</c:if>

					<rich:extendedDataTable id="dataTable"
						value="#{vacationBean.fillTable()}" var="dataItem"
						style="width:600px; height:200px" rowKeyVar="row">

						<f:facet name="header">
							<h:outputText value="Your vacations" />
						</f:facet>

						<rich:column id="sDate" headerClass="dataTableHeader"
							width="100px" colspan="3">
							<f:facet name="header">Start date</f:facet>
							<h:outputText value="#{dataItem.startDate}">
								<f:convertDateTime pattern="yyyy-MM-dd" />
							</h:outputText>
						</rich:column>

						<rich:column id="eDate" headerClass="dataTableHeader"
							width="100px">
							<f:facet name="header">End date</f:facet>
							<h:outputText value="#{dataItem.endDate}">
								<f:convertDateTime pattern="yyyy-MM-dd" />
							</h:outputText>
						</rich:column>

						<rich:column id="Discription" headerClass="dataTableHeader"
							width="200px">
							<f:facet name="header">Description</f:facet>
							<h:outputText value="#{dataItem.description}" />
						</rich:column>

						<rich:column id="State" headerClass="dataTableHeader"
							width="100px">
							<f:facet name="header">State</f:facet>
							<h:form>
								<a4j:commandButton value="Delete"
									action="#{vacationBean.delete}" rendered="#{!dataItem.state}"
									reRender="table">
									<f:setPropertyActionListener value="#{row}"
										target="#{vacationBean.wonderIndex}" />
								</a4j:commandButton>
								<h:outputText value="Past" rendered="#{dataItem.state}" />
							</h:form>

						</rich:column>


						<f:facet name="footer">
							<h:outputText value="Have a FUN vacation!" />
						</f:facet>

					</rich:extendedDataTable>


					<h3>
						<h:form>
							<p>
								<a4j:commandButton action="#{vacationBean.tiredMethod}"
									value="I'm tired. Take new vacation" />
								<a4j:commandButton action="#{vacationBean.hideDiv}" value="hide" />
							</p>
						</h:form>
					</h3>
				</div>
			</center>
			<c:if test="#{not empty vacationBean.iAmTired}">
				<center>
					<h:form>
						<div class="newVacation">



							<center>
								<p>Take new vacation form</p>
							</center>

							<div class="leftCalendar">
								<h:panelGrid columns="2">
									<h:outputText value="From: " />
									<rich:calendar value="#{vacationBean.startDate}"
										cellWidth="24px" cellHeight="22px" datePattern="yyyy-MM-dd"
										style="width:200px">
										<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
									</rich:calendar>
								</h:panelGrid>
							</div>
							<div class="rightCalendar">
								<h:panelGrid columns="2">
									<h:outputText value="To: " />
									<rich:calendar value="#{vacationBean.endDate}" cellWidth="24px"
										cellHeight="22px" datePattern="yyyy-MM-dd" style="width:200px">
										<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
									</rich:calendar>
								</h:panelGrid>
							</div>
							<div class="description">
								<center>
									<p>
										<h:outputText value="Description" />
										<h:inputTextarea value="#{vacationBean.description}"
											style="width: 275px; height:80px">
											<f:validateLength maximum="30"></f:validateLength>
										</h:inputTextarea>
									</p>
								</center>
							</div>
							<center>
								<p>
									<h:panelGrid columns="3">
										<a4j:commandButton action="#{vacationBean.getNewVacation}"
											value="Add vacation" reRender="table" />
									</h:panelGrid>
								</p>
							</center>
						</div>
					</h:form>
				</center>
			</c:if>
		</div>
	</h:body>
</ui:composition>